/**
 * Created by Apple on 2017/7/26.
 */

window.onload = function () {
class Tabs {
    constructor(id) {
        this.parent = document.querySelector(id);
        this.aBtn = this.parent.querySelectorAll("input");
        this.aLi = this.parent.querySelectorAll("li");
        this.isShow();
    }

    isShow() {
        let _this = this;
        for (let i = 0; i < this.aBtn.length; i++) {
            this.index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(i)

            }
        }
    }

    tab(i) {
        for (let j = 0; j < this.aLi.length; j++) {
            this.aBtn[j].className = '';
            this.aLi[j].style.display = 'none';
        }
        this.aBtn[i].className = 'active';
        this.aLi[i].style.display = 'block'
    }

}
class Tabs2 extends Tabs {
    //属性
    constructor(id) {
        //继承属性 拿到父类的构造器
        super(id);
        this.index = 0;
        this.auto();
    }

    auto() {
        let _this = this
        setInterval(function () {
            _this.index++;
            if (_this.index == _this.aBtn.length) {
                _this.index = 0;
            }
            for (let i = 0; i < _this.aBtn.length; i++) {
                _this.aBtn[i].className = '';
                _this.aLi[i].style.display = 'none';
            }
            _this.aBtn[_this.index].className = 'active';
            _this.aLi[_this.index].style.display = 'block';
        }, 2000)
    }
}
/*class Tabs3 extends Tabs {
    constructor(id) {
        //继承属性 拿到父类的构造器
        super(id);
        this.left = this.parent.querySelector("#left")
        this.right = this.parent.querySelector("#right")
        // this.index = 0;
        this.click();
    }
    click(){
        this.left.onclick=function () {
            console.log(aaaaaa)
        }
    }
}*/
/*
 class Tab3 {
 constructor(id) {
 this.parent = document.querySelector(id)
 this.aBtn = this.parent.querySelectorAll("input");
 this.aLi = this.parent.querySelectorAll("li")
 this.click();
 this.index = 0;
 }

 click() {
 let _this=this
 for (let i = 0; i < this.aBtn.length; i++) {
 this.aBtn[i].onclick = function () {
 if (this.value == "左边") {
 for (let j = 0; j < _this.aBtn.length; j++) {
 _this.aBtn[j].className = '';
 }
 _this.aBtn[i].className = 'active'
 this.left();
 } else if (this.value == "右边") {
 this.right()
 }
 }
 }
 }
 left() {
 this.index--;
 if (this.index > 0) {
 this.index = this.aLi.length - 1;
 }
 for (let i = 0; i < this.aLi.length; i++) {
 this.aLi[i].style.display = 'none'
 }
 this.aLi[this.index].style.display = 'block';
 }
 }*/

    new Tabs("#box1");
    new Tabs2("#box2");
    // new Tabs3("#box3");

}



